<template>
	<view v-if="!isLoding" style="flex-direction: column;display: flex;margin:10px 10px;">
		<u-search v-model="search_number" shape="round"></u-search>
		<view>超级管理员:</view>
				<view class="btn" @click="onLogin(user)" v-for="(user,index) in supers" style="margin: 5px 0;background-color: white;border-radius: 20rpx;z-index: 22;position: relative;box-shadow: rgb(186 186 186 / 51%) 0px 0px 10px 0px;">
					<view style="flex-direction: column;display: flex;margin:5px 5px;">
						<!-- 人员名片 -->
						<view style="margin: 0px 0;padding: 0px 0px;" >
							<view style="display: flex;justify-content: flex-start;align-items: center;">
								<view style="flex:0 0 40%;font-size: 14px;display: flex;justify-content: flex-start;align-items: center;">
									<view style="margin: 5px;padding:3px;border: solid 1rpx #dedede;border-radius: 100px;box-shadow: 0 1px 4px 1px #66666668;"><u-avatar size="35" :src="absUrl(user.head_icon_url)"></u-avatar></view>
									<text>{{user.nickname}}</text>
								</view>
								<view style="flex:0 0 60%;">
									<view style="display: flex;flex-direction: column;font-size: 12px;justify-content: space-between;color: #363636;">
										<view style="margin: 2px;display: flex;">
											<text>ID:&nbsp;{{user.id}}</text>
											<text style="margin-left: 20px;">角色: {{roleName(user.roles)}}</text>
											<text style="margin-left: 20px;">性别:&nbsp;{{sex(user.sex)}}</text>
										</view>
									</view>
								</view>
							</view>
						
		<!-- 					<view style="color:#676767;display: flex;justify-content: space-between;padding: 10rpx 10rpx 0rpx 10rpx;font-size: 13px;">
								<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="share-square" color="#ff8725d4" size="30"></u-icon> 登录 </view>
								<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="list" color="#ff8725d4" size="30"></u-icon> 退出 </view>
								<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="more-circle" color="#ff8725d4" size="30"></u-icon> 移除</view>
							</view> -->
						</view>
					</view>
				</view>
		<view>最近登录:</view>
		<view class="btn" @click="onLogin(user)" v-for="(user,index) in records" style="margin: 5px 0;background-color: white;border-radius: 20rpx;z-index: 22;position: relative;box-shadow: rgb(186 186 186 / 51%) 0px 0px 10px 0px;">
			<view style="flex-direction: column;display: flex;margin:5px 5px;">
				<!-- 人员名片 -->
				<view style="margin: 0px 0;padding: 0px 0px;" >
					<view style="display: flex;justify-content: flex-start;align-items: center;">
						<view style="flex:0 0 40%;font-size: 14px;display: flex;justify-content: flex-start;align-items: center;">
							<view style="margin: 5px;padding:3px;border: solid 1rpx #dedede;border-radius: 100px;box-shadow: 0 1px 4px 1px #66666668;"><u-avatar size="35" :src="absUrl(user.head_icon_url)"></u-avatar></view>
							<text>{{user.nickname}}</text>
						</view>
						<view style="flex:0 0 60%;">
							<view style="display: flex;flex-direction: column;font-size: 12px;justify-content: space-between;color: #363636;">
								<view style="margin: 2px;display: flex;">
									<text>ID:&nbsp;{{user.id}}</text>
									<text style="margin-left: 20px;">角色: {{roleName(user.roles)}}</text>
									<text style="margin-left: 20px;">性别:&nbsp;{{sex(user.sex)}}</text>
								</view>
							</view>
						</view>
					</view>
				
<!-- 					<view style="color:#676767;display: flex;justify-content: space-between;padding: 10rpx 10rpx 0rpx 10rpx;font-size: 13px;">
						<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="share-square" color="#ff8725d4" size="30"></u-icon> 登录 </view>
						<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="list" color="#ff8725d4" size="30"></u-icon> 退出 </view>
						<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="more-circle" color="#ff8725d4" size="30"></u-icon> 移除</view>
					</view> -->
				</view>
			</view>
		</view>
		
		<view>有任务的:</view> 
		<view class="btn" @click="onLogin(user)" v-for="(user,index) in mvps" style="margin: 5px 0;background-color: white;border-radius: 20rpx;z-index: 22;position: relative;box-shadow: rgb(186 186 186 / 51%) 0px 0px 10px 0px;">
			<view style="flex-direction: column;display: flex;margin:5px 5px;">
				<!-- 人员名片 -->
				<view style="margin: 0px 0;padding: 0px 0px;" >
					<view style="display: flex;justify-content: flex-start;align-items: center;">
						<view style="flex:0 0 40%;font-size: 14px;display: flex;justify-content: flex-start;align-items: center;">
							<view style="margin: 5px;padding:3px;border: solid 1rpx #dedede;border-radius: 100px;box-shadow: 0 1px 4px 1px #66666668;"><u-avatar size="35" :src="absUrl(user.head_icon_url)"></u-avatar></view>
							<text>{{user.nickname}}</text>
						</view>
						<view style="flex:0 0 60%;">
							<view style="display: flex;flex-direction: column;font-size: 12px;justify-content: space-between;color: #363636;">
								<view style="margin: 2px;display: flex;">
									<text>ID:&nbsp;{{user.id}}</text>
									<text style="margin-left: 20px;">角色: {{roleName(user.roles)}}</text>
									<text style="margin-left: 20px;">性别:&nbsp;{{sex(user.sex)}}</text>
								</view>
							</view>
						</view>
					</view>
				
<!-- 					<view style="color:#676767;display: flex;justify-content: space-between;padding: 10rpx 10rpx 0rpx 10rpx;font-size: 13px;">
						<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="share-square" color="#ff8725d4" size="30"></u-icon> 登录 </view>
						<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="list" color="#ff8725d4" size="30"></u-icon> 退出 </view>
						<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="more-circle" color="#ff8725d4" size="30"></u-icon> 移除</view>
					</view> -->
				</view>
			</view>
		</view>
		
		<view>所有用户:</view>
		<view @click="onLogin(user)"  v-for="(user,index) in users" style="margin: 5px 0;background-color: white;border-radius: 20rpx;z-index: 22;position: relative;box-shadow: rgb(186 186 186 / 51%) 0px 0px 10px 0px;">
			<view style="flex-direction: column;display: flex;margin:5px 5px;">
				<!-- 人员名片 -->
				<view style="margin: 0px 0;padding: 0px 0px;" >
					<view style="display: flex;justify-content: flex-start;align-items: center;">
						<view style="flex:0 0 40%;font-size: 14px;display: flex;justify-content: flex-start;align-items: center;">
							<view style="margin: 5px;padding:3px;border: solid 1rpx #dedede;border-radius: 100px;box-shadow: 0 1px 4px 1px #66666668;"><u-avatar size="35" :src="absUrl(user.head_icon_url)"></u-avatar></view>
							<text>{{user.nickname}}</text>
						</view>
						<view style="flex:0 0 60%;">
							<view style="display: flex;flex-direction: column;font-size: 12px;justify-content: space-between;color: #363636;">
								<view style="margin: 2px;display: flex;">
									<text>ID:&nbsp;{{user.id}}</text>
									<text style="margin-left: 20px;">角色: {{roleName(user.roles)}}</text>
									<text style="margin-left: 20px;">性别:&nbsp;{{sex(user.sex)}}</text>
								</view>
							</view>
						</view>
					</view>
				
		<!-- 			<view style="color:#676767;display: flex;justify-content: space-between;padding: 10rpx 10rpx 0rpx 10rpx;font-size: 13px;">
						<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="share-square" color="#ff8725d4" size="30"></u-icon> 登录 </view>
						<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="list" color="#ff8725d4" size="30"></u-icon> 退出 </view>
						<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="more-circle" color="#ff8725d4" size="30"></u-icon> 移除</view>
					</view> -->
				</view>
			</view>
		</view>
		
	</view>

</template>

<script>
	import {useUserStore} from '@/stores/user.js'
	
	export default {
		setup() {
			let userStore = useUserStore();
			return {userStore}
		},
		async onLoad() {
			
			uni.showLoading({
				title:'正在加载..'
			})
			
			// let res = await this.$http.get('/common/login/record/list')

			// this.records = res.data
			
			let res = await this.$http.get('/common/user/list/record')
			
			this.records = res.data
			
			res = await this.$http.get('/common/user/list/mvp')
			
			this.mvps = res.data
			
			res = await this.$http.get('/common/user/list')
			this.users = res.data
			console.log(this.users)
			
			// res = await this.$http.get('/common/user/list/super')
			// this.supers = res.data
			// console.log(this.supers)
			
			this.isLoding = false
			uni.hideLoading()
		},
		watch:{
			search_number(val,old){
				// console.log(val)
				// console.log(old)
				
				let that = this
				this.$u.debounce(async ()=>{
					let res = await that.$http.get('/common/user/list/phone',{
						params:{
							phone_number:val
						}
					})
					
					this.users  = res.data
					
					console.log(res.data)
				},500)
			}
		},
		data(){
			return {
				search_number:null,
				isLoding:true,
				records:[],
				users:[],
				mvps:[],
				supers:[]
			}
		},
		computed:{
			sex(){
				return (val) => {
					return val == 1? '男' : '女'
				}
			},
			roleName(){
				return (str)=>{
					let arr = typeof(str)=='object'? str:JSON.parse(str);
					
					if(!arr) arr = []
					
					if(arr.length == 0)
					{
						return '普通用户'
					}else if(arr.includes('super-admin'))
					{
						return '超级管理员' 
					}else if(arr.includes('admin'))
					{
						return '区域运营'
					}else if(arr.includes('publisher'))
					{
						return '发布者' 
					}else if(arr.includes('agent'))
					{
						return '代理'
					}else {
						return '普通用户'
					}
				}
			}
		},
		methods:{
			async onLogin(user) {
				let that = this
				
				uni.showLoading({
					title:'正在登录'
				})
				
				let res = await this.$http.get(`/common/account/login/${user.id}`)
					console.log(res)
					
					that.userStore.token = res.data.token
					that.userStore.baseInfo = res.data.user

					uni.$emit('onIdLogin',res)
					
					uni.hideLoading()
					
					// uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
					// 	delta: 1
					// });
					
					// let pages = getCurrentPages();  //获取所有页面栈实例列表
					// if(pages.length == 1) return
					
					// let nowPage = pages[ pages.length - 1];  //当前页页面实例
					// let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
					// console.log(prevPage)
					// prevPage.$vm.onIdLogin(res.data) //修改上一页data里面的sercode参数值
					// uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
					// 	delta: 1
					// });
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: white;
		/* background-image: linear-gradient(45deg,#e1eebc,#eee6b8); */
	}
	
	.btn:active {
		transform:scale(0.97)
	}
</style>